<template>
  <el-card class="box-card" >
    <el-form :label-position="labelPosition" label-width="80px" >
      <el-form-item label="新闻标题">
        <el-input v-model="reqData.title"></el-input>
      </el-form-item>
      <!-- 分类 -->
      <el-form-item label="选择分类">
        <el-select  placeholder="请选择要发布的分类" v-model="reqData.src">
          <el-option :label="navItem.channel" :value="navItem.cs_id" v-for="(navItem,index) in navList"></el-option>
          
        </el-select>
      </el-form-item>
      <!-- 添加封面 -->
      <el-form-item label="添加封面">
        <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handlerSuccess">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      </el-form-item>
      <!-- 新闻内容区：详情 -->
      <el-form-item label="新闻详情" size="medium">
        <el-input type="textarea"  v-model="reqData.content"></el-input>
      </el-form-item>
      
    </el-form>
    <el-button style="margin-top:100px" type="success" @click="addNew">立即添加</el-button>
    <!-- <el-button style="margin-top:100px" type="denger" @click="returnPre">取消</el-button> -->
    <router-link to="/new"><el-button style="margin:100px 0 0 10px" type="denger" >取消</el-button></router-link>
  </el-card>
</template>

<script>
export default {
  name:'addNewForm',
  data(){
    return {
      labelPosition: 'left',
      dialogImageUrl: '',
      dialogVisible: false,//控制dialog框是否可见
      reqData:{
        title:'', 
        src:'', 
        pic:'',
        content:'',
      },
      navList:[],//要展示的分类导航列表
    }
  },
  props:['isshow'],
  mounted(){
    console.log('添加组件成功挂载了')
    this.$API.navList.getNavList().then((res)=>{
      // console.log(res)
      this.navList = res.data.data.ret
    })
  },
  methods:{
    saveShow(data){console.log(data)},
    //删除图片的回调
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    //添加图片的回调
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传成功的回调
    handlerSuccess(res, file, fileList){
      console.log(file)
      this.reqData.pic = file.url
    },
    //添加新闻的回调
    async addNew(){
      let result = await this.$API.newsList.addNewRequest(this.reqData)
      console.log(result)
      if(result.data.code==200){
         this.$message.success('恭喜添加成功！')
      }
    },
    //返回上一级
    returnPre(){
      this.$message.error('该功能比较难弄，好烦')
    }
  }
}
</script>

<style>

</style>